<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>胡啸晨的作业</title>
    <style>
        body {
            background: #000;
            overflow: hidden;
        }
        
        canvas {
            display: block;
        }
        /*外加*/
        
        a:link,
        a:hover,
        a:visited,
        a:active {
            color: #fff;
            text-decoration: none;
        }
        
        body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            /*background: #fff;*/
        }
        
        .card-holder {
            position: fixed;
            left: -20px;
            top: 200px;
            width: 20px;
            overflow: visible;
        }
        
        .card-wrapper {
            display: inline-block;
            float: right;
            clear: both;
        }
        
        .card {
            position: relative;
            left: 32px;
            padding: 16px 32px 16px 64px;
            margin: 8px;
            x-box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.5);
            box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.5);
            background: #fff;
            transition: all 0.3s ease-in-out 0.1s;
        }
        
        .card:hover {
            position: relative;
            left: 100%;
            margin-left: -32px;
            box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.5), 0 8px 8px -8px rgba(0, 0, 0, 0.5);
            transition: all 0.3s ease-in-out;
        }
        
        .card-content {
            display: inline-block;
            color: #fff;
            font-family: 'Droid Sans', sans-serif;
            font-size: 16px;
            font-weight: bold;
            white-space: nowrap;
        }
        
        .bg-01 {
            background: #539770;
        }
        
        .bg-02 {
            background: #4B7D74;
        }
        
        .bg-03 {
            background: #8DC2BC;
        }
        
        .bg-04 {
            background: #EDD6B4;
        }
        
        .bg-05 {
            background: #BE7467;
        }
        
        .bg-06 {
            background: #E2AE63;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="1224" height="404"></canvas>
    <script>
        var canvas,
            ctx,
            width,
            height,
            size,
            lines,
            tick;

        function line() {
            this.path = [];
            this.speed = rand(10, 20);
            this.count = randInt(10, 30);
            this.x = width / 2, +1;
            this.y = height / 2 + 1;
            this.target = {
                x: width / 2,
                y: height / 2
            };
            this.dist = 0;
            this.angle = 0;
            this.hue = tick / 5;
            this.life = 1;
            this.updateAngle();
            this.updateDist();
        }

        line.prototype.step = function(i) {
            this.x += Math.cos(this.angle) * this.speed;
            this.y += Math.sin(this.angle) * this.speed;

            this.updateDist();

            if (this.dist < this.speed) {
                this.x = this.target.x;
                this.y = this.target.y;
                this.changeTarget();
            }

            this.path.push({
                x: this.x,
                y: this.y
            });
            if (this.path.length > this.count) {
                this.path.shift();
            }

            this.life -= 0.001;

            if (this.life <= 0) {
                this.path = null;
                lines.splice(i, 1);
            }
        };

        line.prototype.updateDist = function() {
            var dx = this.target.x - this.x,
                dy = this.target.y - this.y;
            this.dist = Math.sqrt(dx * dx + dy * dy);
        }

        line.prototype.updateAngle = function() {
            var dx = this.target.x - this.x,
                dy = this.target.y - this.y;
            this.angle = Math.atan2(dy, dx);
        }

        line.prototype.changeTarget = function() {
            var randStart = randInt(0, 3);
            switch (randStart) {
                case 0: // up
                    this.target.y = this.y - size;
                    break;
                case 1: // right
                    this.target.x = this.x + size;
                    break;
                case 2: // down
                    this.target.y = this.y + size;
                    break;
                case 3: // left
                    this.target.x = this.x - size;
            }
            this.updateAngle();
        };

        line.prototype.draw = function(i) {
            ctx.beginPath();
            var rando = rand(0, 10);
            for (var j = 0, length = this.path.length; j < length; j++) {
                ctx[(j === 0) ? 'moveTo' : 'lineTo'](this.path[j].x + rand(-rando, rando), this.path[j].y + rand(-rando, rando));
            }
            ctx.strokeStyle = 'hsla(' + rand(this.hue, this.hue + 30) + ', 80%, 55%, ' + (this.life / 3) + ')';
            ctx.lineWidth = rand(0.1, 2);
            ctx.stroke();
        };

        function rand(min, max) {
            return Math.random() * (max - min) + min;
        }

        function randInt(min, max) {
            return Math.floor(min + Math.random() * (max - min + 1));
        };

        function init() {
            canvas = document.getElementById('canvas');
            ctx = canvas.getContext('2d');
            size = 30;
            lines = [];
            reset();
            loop();
        }

        function reset() {
            width = Math.ceil(window.innerWidth / 2) * 2;
            height = Math.ceil(window.innerHeight / 2) * 2;
            tick = 0;

            lines.length = 0;
            canvas.width = width;
            canvas.height = height;
        }

        function create() {
            if (tick % 10 === 0) {
                lines.push(new line());
            }
        }

        function step() {
            var i = lines.length;
            while (i--) {
                lines[i].step(i);
            }
        }

        function clear() {
            ctx.globalCompositeOperation = 'destination-out';
            ctx.fillStyle = 'hsla(0, 0%, 0%, 0.1';
            ctx.fillRect(0, 0, width, height);
            ctx.globalCompositeOperation = 'lighter';
        }

        function draw() {
            ctx.save();
            ctx.translate(width / 2, height / 2);
            ctx.rotate(tick * 0.001);
            var scale = 0.8 + Math.cos(tick * 0.02) * 0.2;
            ctx.scale(scale, scale);
            ctx.translate(-width / 2, -height / 2);
            var i = lines.length;
            while (i--) {
                lines[i].draw(i);
            }
            ctx.restore();
        }

        function loop() {
            requestAnimationFrame(loop);
            create();
            step();
            clear();
            draw();
            tick++;
        }

        function onresize() {
            reset();
        }

        window.addEventListener('resize', onresize);

        init();
    </script>


    <div id="qb-sougou-search" style="display: none; opacity: 0;">
        <p>搜索</p>
        <p class="last-btn">复制</p><iframe src=""></iframe></div>

    <div class='card-holder'>
        <div class='card-wrapper'>
            <a href='http://huxiaochen.oschina.io/zuoye/20170206%E5%8D%83%E5%9B%BE%E7%BD%91/index.html'>
                <div class='card bg-01'>
                    <span class='card-content'>千图网作业</span>
                </div>
            </a>
        </div>
        <div class='card-wrapper'>
            <a href='http://huxiaochen.oschina.io/zuoye/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/index.html'>
                <div class='card bg-02'>
                    <span class='card-content'>小米</span>
                </div>
            </a>
        </div>
        <div class='card-wrapper'>
            <a href='http://huxiaochen.oschina.io/zuoye/PC-%E5%BE%85%E7%9D%80/Home.html'>
                <div class='card bg-03'>
                    <span class='card-content'>PC-待着</span>
                </div>
            </a>
        </div>
        <div class='card-wrapper'>
            <a href='http://huxiaochen.oschina.io/zuoye/Phone-%E5%87%A4%E5%87%B0%E9%87%91%E8%9E%8D/home.html'>
                <div class='card bg-04'>
                    <span class='card-content'>Phone-凤凰金融</span>
                </div>
            </a>
        </div>
        <div class='card-wrapper'>
            <a href='#'>
                <div class='card bg-05'>
                    <span class='card-content'>Work5</span>
                </div>
            </a>
        </div>
        <div class='card-wrapper'>
            <a href='#'>
                <div class='card bg-06'>
                    <span class='card-content'>Work6</span>
                </div>
            </a>
        </div>
    </div>
    <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
    </div>
</body>

</html>